<script setup>
import {ref} from "vue";
import { useRouter, useRoute } from "vue-router";
import {ElLoading, ElMessage} from "element-plus";
import {http} from "@/api";
const apiKey = 'deviceData'
const router = useRouter()
const route = useRoute()
const id = route.params.id
const deviceList = ref([])
const memberList = ref([])
// 获取设备列表
http.device.list().then(res => {
  deviceList.value = res.data
})
// 获取用户列表
http.member.list().then(res => {
  memberList.value = res.data
})
/**
 * CREATE TABLE `device_data` (
 *     `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '自增id',
 *     `device_id` int(11) DEFAULT NULL COMMENT '设备id',
 *     `member_id` int(11) DEFAULT NULL COMMENT '用户id',
 *     `hydrogen_concentration` varchar(255) DEFAULT NULL COMMENT '氢气浓度',
 *     `temperature` varchar(255) DEFAULT NULL COMMENT '温度',
 *     `humidity` varchar(255) DEFAULT NULL COMMENT '湿度',
 *     `ecological_liquid` varchar(255) DEFAULT NULL COMMENT '生态液',
 *     `run_status` int(11) DEFAULT NULL COMMENT '运行状态',
 *     `clean_status` int(11) DEFAULT NULL COMMENT '清洗状态',
 *     `hydrogen` varchar(255) DEFAULT NULL COMMENT '氢气',
 *     `hydrogen_sulfide` varchar(255) DEFAULT NULL COMMENT '硫化氢',
 *     `methanol` varchar(255) DEFAULT NULL COMMENT '甲酸醇',
 *     `ethylene_glycol` varchar(255) DEFAULT NULL COMMENT '甲流二醇',
 *     `ethylamine` varchar(255) DEFAULT NULL COMMENT '乙胺',
 *     `indole` varchar(255) DEFAULT NULL COMMENT '吲哚',
 *     `publish_time` datetime DEFAULT NULL COMMENT '格式化时间',
 *     `updated_time` datetime DEFAULT NULL COMMENT '更新时间',
 *     `create_time` datetime DEFAULT NULL COMMENT '创建时间',
 *     PRIMARY KEY (`id`)
 *   ) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4 COMMENT='设备数据表';
 *   根据数据表生成formData
 */
const formData = ref({
  id: undefined,
  device_id: '',
  member_id: '',
  hydrogen_concentration: '',
  temperature: '',
  humidity: '',
  ecological_liquid: '',
  run_status: '',
  clean_status: '',
  hydrogen: '',
  hydrogen_sulfide: '',
  methanol: '',
  ethylene_glycol: '',
  ethylamine: '',
  indole: '',
  publish_time: '',
  updated_time: '',
  create_time: '',
})
const rules = ref({
  name: [
    { required: true, message: '请输入', trigger: 'blur' },
  ],
  member_id: [
    { required: true, message: '请选择', trigger: 'change' },
  ],
  device_id: [
    { required: true, message: '请选择', trigger: 'change' },
  ],
})

const formRef =  ref(null)
if (id) {
  // 获取详情
  http[apiKey].read(id).then(res => {
    for (const valueKey in formData.value) {
      formData.value[valueKey] = res.data[valueKey]
    }
    formData.value.id = id
  })
}
const cancel = () => {
  router.back()
}
const confirm = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      const loadingInstance = ElLoading.service()
      if (id) {
        // 编辑
        http[apiKey].update({
          ...formData.value,
          id
        }).then(res => {
          ElMessage.success('编辑成功')
          router.back()
        }).finally(() => {
          loadingInstance.close()
        })
      } else {
        // 新增
        http[apiKey].create(formData.value).then(res => {
          ElMessage.success('新增成功')
          router.back()
        }).finally(() => {
          loadingInstance.close()
        })
      }
    } else {
      console.log('error submit!!')
      return false
    }
  })
}
</script>

<template>
  <PageMain :title="id ? '编辑' :'新增'" is-back>
    <div class="form-content f-c j-b">
      <div class="form-box">
        <el-form ref="formRef" :model="formData" :rules="rules" label-position="top" >
         <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="设备" prop="device_id">
              <el-select v-model="formData.device_id" placeholder="请选择设备">
                <el-option
                    v-for="item in deviceList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户" prop="member_id">
              <el-select v-model="formData.member_id" placeholder="请选择所属用户">
                <el-option
                    v-for="item in memberList"
                    :key="item.id"
                    :label="item.nickname"
                    :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="氢气浓度" prop="hydrogen_concentration">
              <el-input v-model="formData.hydrogen_concentration" placeholder="请输入氢气浓度"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="温度" prop="temperature">
              <el-input v-model="formData.temperature" placeholder="请输入温度"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="湿度" prop="humidity">
              <el-input v-model="formData.humidity" placeholder="请输入湿度"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="生态液" prop="ecological_liquid">
              <el-input v-model="formData.ecological_liquid" placeholder="请输入生态液"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="运行状态" prop="run_status">
              <el-select v-model="formData.run_status" placeholder="请选择运行状态">
                <el-option :value="0" label="否" />
                <el-option :value="1" label="是" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="清洗状态" prop="clean_status">
              <el-select v-model="formData.clean_status" placeholder="请选择清洗状态">
                <el-option :value="0" label="否" />
                <el-option :value="1" label="是" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="氢气" prop="hydrogen">
              <el-input v-model="formData.hydrogen" placeholder="请输入氢气"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="硫化氢" prop="hydrogen_sulfide">
              <el-input v-model="formData.hydrogen_sulfide" placeholder="请输入硫化氢"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="甲酸醇" prop="methanol">
              <el-input v-model="formData.methanol" placeholder="请输入甲酸醇"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="甲流二醇" prop="ethylene_glycol">
              <el-input v-model="formData.ethylene_glycol" placeholder="请输入甲流二醇"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="乙胺" prop="ethylamine">
              <el-input v-model="formData.ethylamine" placeholder="请输入乙胺"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="吲哚" prop="indole">
              <el-input v-model="formData.indole" placeholder="请输入吲哚"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="生成时间" prop="publish_time">
              <el-date-picker value-format="YYYY-MM-DD" type="date" v-model="formData.publish_time" placeholder="请输入生成时间"></el-date-picker>
            </el-form-item>
          </el-col>
         </el-row>
        </el-form>
      </div>
      <div class="form-button f-s">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="confirm">确认</el-button>
      </div>
    </div>
  </PageMain>
</template>
<style lang="scss">
</style>
